<template>
  <el-dialog
    class="videoDialog"
    :visible="videoStatus"
    @close="btnCancel"
    :close-on-click-modal="false"
  >
    <video
      ref="video"
      :src="videoURL"
      autoplay
      loop
      @canplay="loading = false"
    ></video>
    <div v-loading="loading" class="loading"></div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    videoStatus: {
      type: Boolean,
      default: false
    },
    videoURL: {
      type: String,
      default: null,
      request: true
    }
  },
  data () {
    return {
      loading: true
    }
  },
  methods: {
    btnCancel () {
      this.$emit('update:videoStatus', false)
    }
  }
}
</script>

<style scoped lang="scss">
.videoDialog ::v-deep {
  left: 50%;
  overflow: visible;
  padding: 0;
  width: 0;
  height: 0;
  .el-dialog__header {
    padding: 0;
    height: 0;
    .el-dialog__headerbtn {
      position: relative;
      left: -25px;
      top: -25px;
      width: 50px;
      height: 50px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 20px;
      &:hover i {
        color: #fff;
      }
    }
  }
  .el-dialog__body {
    padding: 0;
    .loading {
      position: relative;
      top: -20vh;
      translate: -100px;
      width: 200px;
      height: 200px;
      background-color: rgba(0, 0, 0, 0);
      .el-loading-mask {
        background-color: rgba(0, 0, 0, 0);
        .circular {
          height: 100px;
          width: 100px;
        }
      }
    }
    video {
      translate: -50% 10vh;
      width: 50vw;
      min-width: 500px;
    }
  }
}
</style>
